<ion-modal-view class="modal-full-height">

  <ion-header-bar class="bar-positive">

    <button class="button button-clear visible-xs"
            ng-if="!slides.slider.activeIndex"
            ng-click="closeModal()" translate>COMMON.BTN_CANCEL
    </button>
    <button class="button button-icon button-clear icon ion-ios-arrow-back buttons header-item"
            ng-click="slidePrev()"
            ng-if="slideBehavior.hasPreviousButton">
    </button>
    <button class="button button-icon button-clear icon ion-ios-help-outline visible-xs"
            ng-if="slideBehavior.helpAnchor"
            ng-click="showHelpModal(slideBehavior.helpAnchor)">
    </button>

    <h1 class="title" translate>ACCOUNT.NEW.WALLET_ACCOUNT_TITLE</h1>

    <!-- next -->
    <button class="button button-clear icon-right visible-xs"
            ng-if="slideBehavior.hasNextButton"
            ng-click="doNext()">
      <span translate>COMMON.BTN_NEXT</span>
      <i class="icon ion-ios-arrow-right"></i>
    </button>
    <!-- send -->
    <button class="button button-clear icon-right visible-xs"
            ng-if="slideBehavior.hasSendButton"
            ng-click="doNewAccount()">
      <i class="icon ion-android-send"></i>
    </button>
  </ion-header-bar>


    <ion-slides options="slides.options" slider="slides.slider">

      <!-- STEP 1: salt -->
      <ion-slide-page>
        <ion-content class="has-header" scroll="false">
          <form name="saltForm" novalidate="" ng-submit="doNext('saltForm')">

            <div class="list"
                 ng-init="setForm(saltForm, 'saltForm')">

              <div class="item item-text-wrap text-center padding hidden-xs" >
                <a class="pull-right icon-help" ng-click="showHelpModal('join-salt')"></a>
                <span translate>ACCOUNT.NEW.SALT_WARNING</span>
              </div>

              <!-- salt -->
              <div class="item item-input"
                   ng-class="{ 'item-input-error': saltForm.$submitted && saltForm.username.$invalid}">
                <span class="input-label" translate>LOGIN.SALT</span>
                <input ng-if="!showUsername"
                       name="username" type="password" placeholder="{{'LOGIN.SALT_HELP' | translate}}"
                       ng-change="formDataChanged()"
                       ng-model="formData.username"
                       ng-minlength="8"
                       required>
                <input ng-if="showUsername"
                       name="username" type="text" placeholder="{{'LOGIN.SALT_HELP' | translate}}"
                       ng-change="formDataChanged()"
                       ng-model="formData.username"
                       ng-minlength="8"
                       required>
              </div>
              <div class="form-errors"
                   ng-show="saltForm.$submitted && saltForm.username.$error"
                   ng-messages="saltForm.username.$error">
                <div class="form-error" ng-message="minlength">
                  <span translate="ERROR.FIELD_TOO_SHORT_WITH_LENGTH" translate-values="{minLength: 8}"></span>
                </div>
                <div class="form-error" ng-message="required">
                  <span translate="ERROR.FIELD_REQUIRED"></span>
                </div>
              </div>

              <!-- confirm salt -->
              <div class="item item-input"
                   ng-class="{ 'item-input-error': saltForm.$submitted && saltForm.confirmSalt.$invalid}">
                <span class="input-label pull-right" translate>ACCOUNT.NEW.SALT_CONFIRM</span>
                <input ng-if="!showUsername"
                       name="confirmUsername" type="password"
                       placeholder="{{'ACCOUNT.NEW.SALT_CONFIRM_HELP' | translate}}"
                       ng-model="formData.confirmUsername"
                       compare-to="formData.username">
                <input ng-if="showUsername"
                       name="confirmUsername" type="text"
                       placeholder="{{'ACCOUNT.NEW.SALT_CONFIRM_HELP' | translate}}"
                       ng-model="formData.confirmUsername"
                       compare-to="formData.username">
              </div>
              <div class="form-errors"
                   ng-show="saltForm.$submitted && saltForm.confirmUsername.$error"
                   ng-messages="saltForm.confirmUsername.$error">
                <div class="form-error" ng-message="compareTo">
                  <span translate="ERROR.SALT_NOT_CONFIRMED"></span>
                </div>
              </div>

              <!-- Show values -->
              <div class="item item-toggle dark">
                <span translate>COMMON.SHOW_VALUES</span>
                <label class="toggle toggle-royal">
                  <input type="checkbox" ng-model="showUsername">
                  <div class="track">
                    <div class="handle"></div>
                  </div>
                </label>
              </div>

              <div class="padding hidden-xs text-right">
                <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button" translate>COMMON.BTN_CANCEL
                </button>
                <button class="button button-calm icon-right ion-chevron-right ink" type="submit" translate>
                  COMMON.BTN_NEXT
                  <i class="icon ion-arrow-right-a"></i>
                </button>
              </div>
            </div>
          </form>
        </ion-content>
      </ion-slide-page>

      <!-- STEP 2: password-->
      <ion-slide-page>
        <ion-content class="has-header" scroll="false">
          <form name="passwordForm" novalidate="" ng-submit="doNext('passwordForm')">

            <div class="item item-text-wrap text-center padding hidden-xs" >
              <a class="pull-right icon-help" ng-click="showHelpModal('join-password')"></a>
              <span translate>ACCOUNT.NEW.PASSWORD_WARNING</span>
            </div>

            <div class="list"
                 ng-init="setForm(passwordForm, 'passwordForm')">

              <!-- password -->
              <div class="item item-input"
                   ng-class="{ 'item-input-error': passwordForm.$submitted && passwordForm.password.$invalid}">
                <span class="input-label" translate>LOGIN.PASSWORD</span>
                <input ng-if="!showPassword"
                       name="password" type="password" placeholder="{{'LOGIN.PASSWORD_HELP' | translate}}"
                       ng-model="formData.password"
                       ng-change="formDataChanged()"
                       ng-minlength="8"
                       required>
                <input ng-if="showPassword"
                       name="text" type="text" placeholder="{{'LOGIN.PASSWORD_HELP' | translate}}"
                       ng-model="formData.password"
                       ng-change="formDataChanged()"
                       ng-minlength="8"
                       required>
              </div>
              <div class="form-errors"
                   ng-show="passwordForm.$submitted && passwordForm.password.$error"
                   ng-messages="passwordForm.password.$error">
                <div class="form-error" ng-message="minlength">
                  <span translate="ERROR.FIELD_TOO_SHORT_WITH_LENGTH" translate-values="{minLength: 8}"></span>
                </div>
                <div class="form-error" ng-message="required">
                  <span translate="ERROR.FIELD_REQUIRED"></span>
                </div>
              </div>

              <!-- confirm password -->
              <div class="item item-input"
                   ng-class="{ 'item-input-error': passwordForm.$submitted && passwordForm.confirmPassword.$invalid}">
                <span class="input-label" translate>ACCOUNT.NEW.PASSWORD_CONFIRM</span>
                <input ng-if="!showPassword"
                       name="confirmPassword" type="password"
                       placeholder="{{'ACCOUNT.NEW.PASSWORD_CONFIRM_HELP' | translate}}"
                       ng-model="formData.confirmPassword"
                       compare-to="formData.password">
                <input ng-if="showPassword"
                       name="confirmPassword" type="text"
                       placeholder="{{'ACCOUNT.NEW.PASSWORD_CONFIRM_HELP' | translate}}"
                       ng-model="formData.confirmPassword"
                       compare-to="formData.password">
              </div>
              <div class="form-errors"
                   ng-show="passwordForm.$submitted && passwordForm.confirmPassword.$error"
                   ng-messages="passwordForm.confirmPassword.$error">
                <div class="form-error" ng-message="compareTo">
                  <span translate="ERROR.PASSWORD_NOT_CONFIRMED"></span>
                </div>
              </div>

              <!-- Show values -->
              <div class="item item-toggle dark">
                <span translate>COMMON.SHOW_VALUES</span>
                <label class="toggle toggle-royal">
                  <input type="checkbox" ng-model="showPassword">
                  <div class="track">
                    <div class="handle"></div>
                  </div>
                </label>
              </div>
            </div>

            <div class="padding hidden-xs text-right">
              <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button" translate>COMMON.BTN_CANCEL
              </button>
              <button class="button button-calm icon-right ion-chevron-right ink" type="submit" translate>
                  COMMON.BTN_NEXT
              </button>
            </div>

            <div class="padding hidden-xs">
            </div>
          </form>
        </ion-content>
      </ion-slide-page>


      <!--<cs-extension-point name="last-slide"></cs-extension-point>-->

      <!-- STEP 3: last slide  -->
      <ion-slide-page>
        <ion-content class="has-header" scroll="false">

          <!-- Computing -->

          <div class="padding center" ng-if="formData.computing">
            <ion-spinner icon="android"></ion-spinner>
          </div>
          <!-- ng-if="formData.computing" -->

          <!-- Account available -->
          <div ng-if="accountAvailable && !formData.computing">
            <div class="padding text-center" translate>ACCOUNT.NEW.LAST_SLIDE_CONGRATULATION</div>

            <div class="list">

              <ion-item class="item item-text-wrap item-border">
                <div class="dark pull-right padding-right" ng-if="formData.computing">
                  <ion-spinner icon="android"></ion-spinner>
                </div>
                <span class="input-label" translate>COMMON.PUBKEY</span>
                <span class="gray text-no-wrap" ng-if="formData.computing" translate>
                  ACCOUNT.NEW.COMPUTING_PUBKEY
                </span>
                <span class="gray text-no-wrap" ng-if="formData.pubkey">
                  {{formData.pubkey}}
                </span>
              </ion-item>
            </div>

            <div class="padding hidden-xs text-right">
              <button class="button button-clear button-dark ink" ng-click="closeModal()" type="button" translate>COMMON.BTN_CANCEL
              </button>
              <button class="button button-positive ink" ng-click="doNewAccount()" translate>
                COMMON.BTN_CREATE
              </button>
            </div>
          </div>

          <!-- Existing non-empty account -->
          <div ng-if="!accountAvailable && !formData.computing">

            <ion-item class="item-icon-left item-text-wrap text-center">
                <i class="icon ion-android-close active"></i>
                <span id="modal-license" translate>ERROR.EXISTING_ACCOUNT</span>
            </ion-item>


            <div class="list">

              <ion-item class="item item-text-wrap item-border">
                <div class="dark pull-right padding-right" ng-if="formData.computing">
                  <ion-spinner icon="android"></ion-spinner>
                </div>
                <span class="gray text-no-wrap" ng-if="formData.computing" translate>
                  ACCOUNT.NEW.COMPUTING_PUBKEY
                </span>
                <div class="padding text-center">
                  <span class="gray text-no-wrap" ng-if="formData.pubkey">
                    {{formData.pubkey}}
                  </span>
                </div>
              </ion-item>

              <div class="padding text-center">
                <span translate>ERROR.EXISTING_ACCOUNT_REQUEST</span>
              </div>

            </div>
            <div class="padding hidden-xs text-left">
              <button class="button button-assertive icon-left ion-chevron-left ink"
                      ng-click="identifierRecovery()" translate>
                COMMON.BTN_MODIFY
              </button>
            </div>
          </div>

        </ion-content>
      </ion-slide-page>
  </ion-slide-box>
</ion-modal-view>
